<template>
  <view class="community-container">
    <!-- 顶部选项卡 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 发布按钮 -->
    <view class="publish-btn" @tap="handlePublish">
      <text class="iconfont">✏️</text>
    </view>

    <!-- 动态内容区域 -->
    <swiper class="content-swiper" :current="currentTab" @change="handleSwiperChange">
      <!-- 健康圈子 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore">
          <view class="moments-list">
            <view class="moment-item" v-for="(item, index) in momentsList" :key="index">
              <!-- 用户信息 -->
              <view class="user-info">
                <image class="avatar" :src="item.userAvatar" mode="aspectFill"></image>
                <view class="user-detail">
                  <text class="nickname">{{ item.userName }}</text>
                  <text class="time">{{ item.createTime }}</text>
                </view>
              </view>
              <!-- 动态内容 -->
              <view class="content">
                <text class="text">{{ item.content }}</text>
                <!-- 图片展示 -->
                <view class="image-list" v-if="item.images && item.images.length">
                  <image 
                    v-for="(img, imgIndex) in item.images" 
                    :key="imgIndex"
                    :src="img"
                    mode="aspectFill"
                    @tap="previewImage(item.images, imgIndex)"
                  ></image>
                </view>
              </view>
              <!-- 互动区域 -->
              <view class="interaction">
                <view class="action-list">
                  <view class="action-item" @tap="handleLike(item)">
                    <text class="iconfont" :class="{ liked: item.isLiked }">👍</text>
                    <text>{{ item.likes || 0 }}</text>
                  </view>
                  <view class="action-item" @tap="handleComment(item)">
                    <text class="iconfont">💬</text>
                    <text>{{ item.comments ? item.comments.length : 0 }}</text>
                  </view>
                </view>
                <!-- 评论列表 -->
                <view class="comment-list" v-if="item.comments && item.comments.length">
                  <view class="comment-item" v-for="(comment, commentIndex) in item.comments" :key="commentIndex">
                    <text class="commenter">{{ comment.userName }}：</text>
                    <text class="comment-content">{{ comment.content }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>

      <!-- 疾病百科 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMoreDiseases">
          <view class="disease-list">
            <view class="disease-item" v-for="(disease, index) in diseaseList" :key="index" @tap="goToDiseaseDetail(disease)">
              <image class="disease-image" :src="disease.image" mode="aspectFill"></image>
              <view class="disease-info">
                <text class="disease-name">{{ disease.name }}</text>
                <text class="disease-desc">{{ disease.description }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>

      <!-- 健康资讯 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMoreArticles">
          <view class="article-list">
            <view class="article-item" v-for="(article, index) in articleList" :key="index" @tap="goToArticleDetail(article)">
              <image class="article-image" :src="article.image" mode="aspectFill"></image>
              <view class="article-info">
                <text class="article-title">{{ article.title }}</text>
                <text class="article-desc">{{ article.description }}</text>
                <view class="article-meta">
                  <text class="category">{{ article.category }}</text>
                  <text class="time">{{ article.publishTime }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['健康圈子', '疾病百科', '健康资讯'],
      currentTab: 0,
      momentsList: [
        {
          id: 1,
          userName: '健康达人',
          userAvatar: 'https://example.com/avatar1.jpg',
          content: '分享一个保持健康的小技巧：每天坚持晨跑30分钟，让一天充满活力！',
          images: ['https://example.com/image1.jpg'],
          createTime: '10分钟前',
          likes: 12,
          isLiked: false,
          comments: [
            {
              userName: '跑步爱好者',
              content: '晨跑确实很好，我已经坚持3年了'
            }
          ]
        }
      ],
      diseaseList: [
        {
          id: 1,
          name: '感冒',
          description: '最常见的呼吸道感染疾病，了解症状和预防方法',
          image: 'https://example.com/cold.jpg'
        }
      ],
      articleList: [
        {
          id: 1,
          title: '春季养生指南',
          description: '春季养生要点，助你轻松调理身体',
          image: 'https://example.com/spring-health.jpg',
          category: '养生保健',
          publishTime: '2024-03-06'
        }
      ]
    }
  },
  
  methods: {
    switchTab(index) {
      this.currentTab = index
    },
    
    handleSwiperChange(e) {
      this.currentTab = e.detail.current
    },
    
    handlePublish() {
      // 检查登录状态
      this.checkLoginBeforeAction(() => {
        uni.navigateTo({
          url: '/pages/community/publish'
        })
      })
    },
    
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      })
    },
    
    handleLike(item) {
      this.checkLoginBeforeAction(() => {
        // 处理点赞逻辑
        item.isLiked = !item.isLiked
        item.likes += item.isLiked ? 1 : -1
      })
    },
    
    handleComment(item) {
      this.checkLoginBeforeAction(() => {
        uni.navigateTo({
          url: `/pages/community/comment?id=${item.id}`
        })
      })
    },
    
    goToDiseaseDetail(disease) {
      uni.navigateTo({
        url: `/pages/community/disease-detail?id=${disease.id}`
      })
    },
    
    goToArticleDetail(article) {
      uni.navigateTo({
        url: `/pages/community/article-detail?id=${article.id}`
      })
    },
    
    loadMore() {
      // 加载更多动态
    },
    
    loadMoreDiseases() {
      // 加载更多疾病信息
    },
    
    loadMoreArticles() {
      // 加载更多文章
    }
  }
}
</script>

<style lang="scss">
.community-container {
  min-height: 100vh;
  background: #f5f5f5;
  
  .tab-bar {
    display: flex;
    background: #fff;
    padding: 20rpx 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    
    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      position: relative;
      
      &.active {
        color: #007AFF;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: #007AFF;
          border-radius: 2rpx;
        }
      }
    }
  }
  
  .publish-btn {
    position: fixed;
    right: 30rpx;
    bottom: 100rpx;
    width: 100rpx;
    height: 100rpx;
    background: #007AFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
    
    .iconfont {
      font-size: 40rpx;
      color: #fff;
    }
  }
  
  .content-swiper {
    height: calc(100vh - 88rpx);
    margin-top: 88rpx;
    
    .scroll-view {
      height: 100%;
    }
  }
  
  .moments-list {
    padding: 20rpx;
    
    .moment-item {
      background: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      
      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        
        .user-detail {
          .nickname {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            display: block;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
      
      .content {
        .text {
          font-size: 28rpx;
          color: #333;
          line-height: 1.6;
        }
        
        .image-list {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20rpx;
          
          image {
            width: 220rpx;
            height: 220rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
            border-radius: 8rpx;
            
            &:nth-child(3n) {
              margin-right: 0;
            }
          }
        }
      }
      
      .interaction {
        margin-top: 20rpx;
        
        .action-list {
          display: flex;
          border-top: 1rpx solid #eee;
          padding-top: 20rpx;
          
          .action-item {
            margin-right: 40rpx;
            display: flex;
            align-items: center;
            
            .iconfont {
              font-size: 32rpx;
              color: #666;
              margin-right: 8rpx;
              
              &.liked {
                color: #007AFF;
              }
            }
            
            text {
              font-size: 24rpx;
              color: #666;
            }
          }
        }
        
        .comment-list {
          margin-top: 20rpx;
          background: #f8f8f8;
          padding: 20rpx;
          border-radius: 8rpx;
          
          .comment-item {
            font-size: 26rpx;
            margin-bottom: 10rpx;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .commenter {
              color: #007AFF;
              font-weight: bold;
            }
            
            .comment-content {
              color: #333;
            }
          }
        }
      }
    }
  }
  
  .disease-list {
    padding: 20rpx;
    
    .disease-item {
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      
      .disease-image {
        width: 100%;
        height: 300rpx;
      }
      
      .disease-info {
        padding: 20rpx;
        
        .disease-name {
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .disease-desc {
          font-size: 26rpx;
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }
  
  .article-list {
    padding: 20rpx;
    
    .article-item {
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      display: flex;
      padding: 20rpx;
      
      .article-image {
        width: 200rpx;
        height: 150rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .article-info {
        flex: 1;
        
        .article-title {
          font-size: 30rpx;
          color: #333;
          font-weight: bold;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .article-desc {
          font-size: 26rpx;
          color: #666;
          line-height: 1.6;
          margin-bottom: 20rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        
        .article-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .category {
            font-size: 24rpx;
            color: #007AFF;
            background: rgba(0,122,255,0.1);
            padding: 4rpx 12rpx;
            border-radius: 4rpx;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}
</style> 